<template>
    <div id="mapBoxId"></div>
</template>
<script lang="ts" setup>
import { TDMAP_TK } from '@/utils/constant';
import L from 'leaflet';
let map: any;
const getLayers = () => {
    if (!map) return;
    L.tileLayer(`https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${TDMAP_TK}`, {
        zIndex: 30,
        minZoom: 9,
        maxZoom: 18
    }).addTo(map);
    L.tileLayer(`https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${TDMAP_TK}`, {
        zIndex: 31,
        minZoom: 9,
        maxZoom: 18
    }).addTo(map);
};
const initMap = () => {
  // 经纬度[维度,经度]
    map = L.map('mapBoxId').setView([41.33632,86.25903],16)
    getLayers();
};
onMounted(() => {
    initMap();
});
</script>
<style lang="scss" scoped>
#mapBoxId {
    width: 100vw;
    height: 100vh;
}
</style>
